<template>
  <div class="box">
    <h1>Child1 - 命名空间</h1>
    <div>count: {{ $store.state.child2.count }}</div>
    <div>count: {{ count }}</div>
    <div>thousandflod: {{ $store.getters['child2/thousandflod'] }}</div>
    <div>thousandflod: {{ thousandflod }}</div>
    <button @click="clickHandler1">调用actions修改count-1</button>
    <button @click="increment">调用actions修改count-2</button>
    <br /><br />
    <button @click="clickHandler2">调用mutations修改count-1</button>
    <button @click="ADD">调用mutations修改count-2</button>
  </div>
</template>

<script>
import { mapActions, mapState,mapMutations, mapGetters } from "vuex";

export default {
  name: "Child2",
  computed: {
    ...mapGetters('child2',['thousandflod']),
    // ...mapState({
    //     count: state => state.child2.count
    // })
    ...mapState("child2", ["count"]),
  },
  methods: {
    ...mapMutations('child2',['ADD']),
    ...mapActions("child2", ["increment"]),
    clickHandler1() {
      this.$store.dispatch("child2/increment");
    },
    clickHandler2() {
        this.$store.commit('child2/ADD')
    }
  },
};
</script>

<style scoped></style>
